<template>
  <view class="container">
    <view class="topline">
      <nut-steps :current="current" @click-step="handleClickStep" class="steps">
        <nut-step title="确认订单">1</nut-step>
        <nut-step title="阅读条款">2</nut-step>
        <nut-step title="完成">3</nut-step>
      </nut-steps>
    </view>

    <template v-if="current === 1">
      <view class="step_info">
        <image class="img" src="../../assets/images/sign/step1.png" mode="scaleToFill"></image>
        <view class="right">
          <view class="title">
            <text>预览电子承运单</text>
            <text><text style="color:#0966ff">1</text>/3</text>
          </view>
          <view class="content">
            请您预览电子承运单，并检查电子承运单上的信息是否有误。
          </view>
        </view>
      </view>
      <view class="bill_box">
        <bill-of-lading :billData="{}" :type="'1'" />
      </view>
      <view style="height: 1rpx"></view>
      <view class="bottom_btns">
        <view class="left_btn" @click="cancel">取消</view>
        <view class="right_btn" @click="toCurrent(2)">下一步</view>
      </view>
    </template>

    <template v-else-if="current === 2">
      <view class="step_info">
        <image class="img" src="../../assets/images/sign/step2.png" mode="scaleToFill"></image>
        <view class="right">
          <view class="title">
            <text>阅读《承运单特别条约》</text>
            <text><text style="color:#0966ff">2</text>/3</text>
          </view>
          <view class="content">
            请您仔细阅读《承运单特别条约》，并在文本最下方的签名栏签名同意。
          </view>
        </view>
      </view>
      <view class="article_box">
        <view class="article_title">《承运单特别约定》</view>
        <text class="article_content">{{ yueding }}</text>
        <view class="agree">本人同意承运单特别约定</view>
        <view class="sign_img" @click="toSignPage">
          <view class="text" v-if="!imgSignBase64">点击此处，签名同意</view>
          <image :src="'data:image/png;base64,'+imgSignBase64" mode="scaleToFill" class="img" v-else></image>
        </view>
      </view>
      <view style="height: 1rpx"></view>
      <view class="bottom_btns">
        <view class="left_btn" @click="toCurrent(1)">上一步</view>
        <view class="right_btn" @click="toCurrent(3)">下一步</view>
      </view>
    </template>

    <template v-else-if="current === 3">
      <view class="success_box">
        <image class="img" src="../../assets/images/sign/success.png" mode="scaleToFill"></image>
        <view class="text">恭喜您，成功签名确认</view>
        <template v-if="!paid">
          <view class="sub_text">为了保证运输效率，请您尽快完成支付</view>
          <view class="button_1">立即支付</view>
          <view class="button_2" @click="toBill">查看电子承运单</view>
        </template>
        <template v-else>
          <view class="sub_text">感谢您对盛辉物流的支持~</view>
          <view class="button_1" @click="toBill">查看电子承运单</view>
          <view class="button_2" @click="toHomePage">返回首页</view>
        </template>
      </view>
    </template>

  </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, onMounted } from 'vue';
import Taro, {useDidShow} from "@tarojs/taro";
import { yueding } from './tebieyueding.ts'
import billOfLading from '@/components/sign/billOfLading.vue'
import {$post, $upload} from '@/@api'
import useMyOrderStore from "@/store/myOrder";
const order = useMyOrderStore()
const current = ref<number>(1)
const imgSignBase64 = ref<string>('')
const paid = ref<boolean>(true)
const handleClickStep = ()=>{}

const toSignPage = ()=>{
  Taro.navigateTo({
    url: '/pages/sign/sign'
  })
}

const cancel = ()=>{
  Taro.navigateBack()
}

const toCurrent = async (c: number) => {
  if(c==3){
    current.value = c
    return
    if(!imgSignBase64.value){
      Taro.showToast({
        icon: 'none',
        title: '请先进行签名'
      })
      return
    }
    // let formData = new FormData()
    // formData.append('billNo',order.orderList.billNo)
    // formData.append('file',base64ToFile(imgSignBase64.value))
    let formData = {
      //billNo: order.orderList.billNo,
      billNo:202000610,
      filePath: base64ToFile(imgSignBase64.value)
    }

    const imgRes = await $upload('/selfmachine-system/workerOrder/filesUpload',formData)
    if (JSON.parse(imgRes.data).code === 200) {
      const res = await $post('/selfmachine-system/order/saveSignature',{
        billNo:order.orderList.billNo,
        signatureImage:JSON.parse(imgRes.data).data.filePicUrl[0]
      })
      if(res.data.code == 200){
        current.value = c
      }
    } else {
      Taro.showToast({
        icon: 'none',
        title: '上传文件失败'
      })
    }

  }
  else{
    current.value = c
  }
}

const base64ToFile = (code)=>{
  const fsm = Taro.getFileSystemManager();  // 获取文件管理器
  code = code .replace(/\ +/g, ""); //去掉空格方法
  code = code .replace(/[\r\n]/g, "");
  const buffer = Taro.base64ToArrayBuffer(code);  //  将 base64 字符串转成 ArrayBuffer 对象
  const fileName = Taro.env.USER_DATA_PATH + '/qm'+Math.random()+'.png';  // 文件系统中的用户目录路径 （本地路径）
  /**
   * @param fileName: 文件路径
   * @param buffer : 要写入的文本或二进制数据
   * @param binary: 指定写入文件的字符编码
   */
  fsm.writeFileSync(fileName, buffer, 'binary');  // 写入文件， 同步方法console.log(fileName);  // 写入成功后就可以访问到该图片路径了
  return fileName
}











const toHomePage = ()=>{
  Taro.reLaunch({
    url: '/pages/index/index'
  })
}



const toBill = ()=>{
  Taro.navigateTo({
    url: '/pages/sign/bill?billNo='+order.orderList.billNo
  })
}

useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages?.length - 1];
  if (currPage.__data__.base64) {
    imgSignBase64.value = currPage.__data__.base64
  }
  else{
    imgSignBase64.value = ''
  }
})


</script>

<style lang="scss" >
// @import "xxx";
// @import url(xxx);
page {
  background-color: #f5f5f5;
  --nut-steps-base-icon-width: 48rpx;
  --nut-steps-base-icon-height: 48rpx;
  --nut-steps-base-icon-line-height: 48rpx;
  --nut-steps-base-icon-font-size: 32rpx;
  --nut-steps-base-content-font-size: 28rpx;
  --nut-steps-base-title-margin-bottom: 16rpx;
  --nut-steps-base-line-color: #6ba3ff;
  --nut-primary-color: #fff;
  --nut-steps-base-title-color: #6ba3ff;
  --nut-steps-wait-icon-bg-color: #6ba3ff;
  --nut-steps-wait-icon-text-color: #0966ff;
  --nut-steps-finish-icon-text-color: #fff;
  --nut-steps-finish-title-color: #fff;
  --nut-steps-finish-head-color: #0966ff;
  --nut-steps-process-icon-text-color: #fff;
  --nut-steps-process-title-color: #fff;
  --nut-steps-process-head-color: #0966ff;
}
.container {
  width: 100%;
  background-color: #f5f5f5;
}
.topline {
  width: 100%;
  height: 270rpx;
  border-top: 1rpx solid #3e86fd;
  background-color: #0966ff;
  .steps {
    margin-top: 36rpx;
  }
}
.step_info {
  width: 700rpx;
  height: 200rpx;
  background-color: #fff;
  margin-left: 25rpx;
  border-radius: 16rpx;
  margin-top: -92rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .img {
    width: 108rpx;
    height: 108rpx;
  }
  .right {
    width: calc(100% - 134rpx);
    display: flex;
    flex-direction: column;
    .title {
      font-weight: 600;
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #252525;
      font-size: 32rpx;
    }
    .content {
      font-weight: 500;
      margin-top: 12rpx;
      font-size: 24rpx;
      line-height: 36rpx;
      color: #999;
    }
  }
}

.article_box {
  width: 700rpx;
  background-color: #fff;
  margin-left: 25rpx;
  border-radius: 16rpx;
  margin-top: 16rpx;
  box-sizing: border-box;
  padding: 18rpx 24rpx 24rpx;
  margin-bottom: 152rpx;
  .article_title {
    font-weight: bold;
    font-size: 40rpx;
    margin-top: 10rpx;
    text-align: center;
  }
  .article_content {
    font-weight: bold;
    font-size: 22rpx;
    line-height: 28rpx;
  }
  .agree {
    font-weight: bold;
    font-size: 32rpx;
    color: #0966ff;
    margin-top: 48rpx;
  }
  .sign_img {
    width: 100%;
    height: 228rpx;
    box-sizing: border-box;
    border: 1rpx dashed #c4c4c4;
    background-color: #f8f9fa;
    border-radius: 8rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    .text {
      color: #999;
      font-weight: bold;
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
}
.bill_box {
  width: 700rpx;
  background-color: #fff;
  margin-left: 25rpx;
  border-radius: 16rpx;
  margin-top: 16rpx;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 152rpx;
}
.bottom_btns {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  .left_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #252525;
    background-color: #fff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    border: 1rpx solid #c4c4c4;
  }
  .right_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #fff;
    background-color: #0966ff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
  }
}
.success_box {
  width: 100%;
  height: calc(100vh - 272rpx);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    width: 280rpx;
    height: 280rpx;
    margin-top: 96rpx;
  }
  .text {
    font-size: 40rpx;
    font-weight: bold;
    line-height: 56rpx;
    margin-top: 32rpx;
    color: #252525;
  }
  .sub_text {
    font-size: 28rpx;
    line-height: 40rpx;
    margin-top: 12rpx;
    color: #999;
  }
  .button_1 {
    width: 590rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    text-align: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    margin-top: 96rpx;
  }
  .button_2 {
    width: 590rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    text-align: center;
    background-color: #fff;
    color: #252525;
    font-size: 32rpx;
    margin-top: 32rpx;
    box-sizing: border-box;
    border: 1rpx solid #c4c4c4;
  }
}
</style>
